import React from 'react';
import { StyleSheet, Text, View, Image, TouchableOpacity } from 'react-native';
import { Button } from 'antd-mobile';
import { Carousel, WhiteSpace, WingBlank, SearchBar } from 'antd-mobile';
import { TabBar, Icon } from 'antd-mobile';
import { Grid } from 'antd-mobile';
import { FlatList, ListView, ScrollView } from 'react-native';

const data = Array.from(new Array(10)).map((_val, i) => ({
    icon: 'https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png',
    text: `名字${i}`,
}));

const data1 = Array.from(new Array(10)).map((_val, i) => ({
    icon: 'https://os.alipayobjects.com/rmsportal/IptWdCkrtkAUfjE.png',
    key: `名字${i}`,
}));

var ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 });
const data2 = ds.cloneWithRows(['内容0', '内容1', '内容2', '内容3', '内容4', '内容5']);

export default class LifePage extends React.Component {
    // getInitialState() {
    //     // 初始化数据源(rowHasChanged是优化的一种手段，只有当r1 !== r2的时候才会重新渲染)
    //     var ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 });
    //     return {
    //         // 给dataSource传递一组 数组
    //         dataSource: ds.cloneWithRows(['内容0', '内容1', '内容2', '内容3', '内容4', '内容5'])
    //     }
    // }

    _renderItem = ({ item }) => (
        <View style={{
            marginHorizontal: 23
        }}>
            <Image
                style={{ width: 50, height: 50 }}
                source={{ uri: `http://img.xiaopiu.com/userImages/img3215969469ee8.jpg` }}
            />
        </View>
    );

    renderItem() {
        // 数组
        var itemAry = [];
        // 颜色数组
        var colorAry = ['gray', 'green', 'blue', 'yellow', 'black', 'orange', 'gray', 'green', 'blue', 'yellow', 'black', 'orange', 'gray', 'green', 'blue', 'yellow', 'black', 'orange'];
        // 遍历
        for (var i = 0; i < colorAry.length; i++) {
            itemAry.push(
                <View style={{
                    marginHorizontal: 23
                }}
                    key={i}
                >
                    <Image
                        style={{ width: 50, height: 50 }}
                        source={{ uri: `http://img.xiaopiu.com/userImages/img3215969469ee8.jpg` }}
                    />
                </View>
            );
        }
        return itemAry;
    }


    render() {
        return (
            <View>
                <WhiteSpace size="xl" />
                <SearchBar placeholder="搜索" />

                <WingBlank size='sm'>
                    <Carousel style={styles.wrapper} autoplayTimeout={2} selectedIndex={2} autoplay infinite afterChange={this.onselectedIndexChange}>
                        <View style={[styles.container]}>
                            <Image
                                style={styles.imageStyle}
                                source={{ uri: `http://img.xiaopiu.com/userImages/img3215969469ee8.jpg` }}
                            />
                        </View>
                        <View style={[styles.container]}>
                            <Image
                                style={styles.imageStyle}
                                source={{ uri: `http://img.xiaopiu.com/userImages/img29159694677d8.jpg` }}
                            />
                        </View>
                        <View style={[styles.container]}>
                            <Image
                                style={styles.imageStyle}
                                source={{ uri: `http://img.xiaopiu.com/userImages/img21159694648f8.jpg` }}
                            />
                        </View>
                        <View style={[styles.container]}>
                            <Image
                                style={styles.imageStyle}
                                source={{ uri: `http://img.xiaopiu.com/userImages/img22159694648f8.jpg` }}
                            />
                        </View>
                        <View style={[styles.container]}>
                            <Image
                                style={styles.imageStyle}
                                source={{ uri: `http://img.xiaopiu.com/userImages/img24159694677d8.jpg` }}
                            />
                        </View>
                    </Carousel>

                    <WhiteSpace size="xl" />

                    <Grid data={data} columnNum={5} hasLine={false} isCarousel={true} carouselMaxRow={1} dots={false} onClick={(_el, index) => alert(index)} />
                </WingBlank>

                <WhiteSpace />

                <FlatList
                    data={data1}
                    renderItem={this._renderItem}
                    horizontal={true}
                    showsHorizontalScrollIndicator={false}
                />

                <WhiteSpace />

                <ListView
                    dataSource={data2}
                    //renderRow={(rowData) => <Text>{rowData}</Text>}
                    renderRow={this._renderItem}
                    horizontal={true}
                    showsHorizontalScrollIndicator={false}
                />

                <WhiteSpace />

                <ScrollView
                    style={{}}
                    horizontal={true}
                    showsHorizontalScrollIndicator={false}
                >
                    {this.renderItem()}
                </ScrollView>

                <WhiteSpace />
            </View>
        );
    }
}

const styles = StyleSheet.create({
    imageStyle: {
        width: 450,
        height: 150,
        resizeMode: 'stretch',
    },
    wrapper: {
        backgroundColor: '#fff',
    },
    container: {
        flexGrow: 1,
        alignItems: 'center',
        justifyContent: 'center',
        width: 450,
        height: 150,
    },
    text: {
        color: '#fff',
        fontSize: 36,
    },
});